import React, { Component } from 'react'

/*
    1. ref 加在 DOM 元素上的时候，可以获取到 DOM 元素
    2. ref 加在类组件上，可以获取到组件的实例
    3. ref 加在函数组件上，不能直接给函数组件添加 ref 
*/


class Header extends Component {

    state = {
        msg: '你好世界'
    }

    render() {
        return <h1> Header 组件：{this.state.msg} </h1>
    }
}

function Main() {

    return <h1>Main 函数组件</h1>
}

export default class App extends Component {

    // 创建一个 ref 属性
    divRef = React.createRef()
    headerRef = React.createRef()
    mainRef = React.createRef()

    render() {
        return (
            <div>

                <div ref={this.divRef}> 这是一个 div 标签 </div>

                <hr />

                <Header ref={this.headerRef} />

                <hr />

                {/* 不能直接给函数组件添加 ref */}
                <Main ref={this.mainRef} />


                <hr />

                <button onClick={() => {

                    // 获取到 div 标签，.current 是固定写法，用来获取 ref 标记的内容
                    console.log(this.divRef.current);


                    console.log(this.headerRef.current);
                    // 可以获取到组件实例，且可以修改组件中的数据内容
                    this.headerRef.current.setState({
                        msg: '你好中国'
                    })


                    console.log(this.mainRef.current);

                }}>获取 ref 值</button>
            </div>
        )
    }
}

